<template>
	<view>


		<view class="kaoshi-head">
			<!-- 头部 年纪切换 搜索 通知 -->
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$openrul('/pages/auth/choiceSubject/indextwo')">
					<view class="kaoshi-head-kemu">{{ subject2.subject_name }}</view>
					<view class="iconfont icon-weibiaoti"></view>
				</view>
				<view class="kaoshi-head-right">
					<!-- <text class="iconfont icon-sousuo" @tap="gotoSearch"></text>
					<text class="iconfont icon-lingdang" @tap="$openrul('/pages/article/notice')" style="margin-left: 12px;"></text> -->
				</view>
			</view>
			<!-- 头部 年纪切换 搜索 通知 -->

		</view>

		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">题库</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="kaoshi-head-nav">
			<view class="kaoshi-head-nav-flex" @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=1')">
				<image :src="static_media.img01" class="kaoshi-head-nav-img"></image>
				<view>章节练习</view>
			</view>
			<view class="kaoshi-head-nav-flex" @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=2')">
				<image :src="static_media.img02" class="kaoshi-head-nav-img"></image>
				<view>真题练习</view>
			</view>
			<view class="kaoshi-head-nav-flex" @tap="navTo('/pages/my/wrongQuestion/index')">
				<image :src="static_media.img03" class="kaoshi-head-nav-img"></image>
				<view>题库错题</view>
			</view>
			<view class="kaoshi-head-nav-flex" @tap="navTo('/pages/my/collect/index')">
				<image :src="static_media.img04" class="kaoshi-head-nav-img"></image>
				<view>我的收藏</view>
			</view>
		</view>

		<view class="kaoshi-tiku-title" v-if="unit_list.length > 0">
			<view class="kaoshi-tiku-title-l">章节练习</view>
			<view @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=1')" class="kaoshi-tiku-title-r">
				全部章节
			</view>
		</view>
		<view class="kaoshi-tiku">
			<!-- 锁头 -->
			<block v-for="(item, index) in unit_list" :key="index">
				<view class="kaoshi-tiku-content" :class="item.is_unlock == 1 ? 'lockbg' : ''" @tap="goto_detail(item, '1')">
					<view class="pub-flex-1">
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-top">
								<view>{{ item.name }}
									<!-- <view class="lock">
										<image src="../../static/img/vip.png" mode=""></image>
										<view>未解锁</view>
									</view> -->
								</view>
							</view>
							<view class="kaoshi-tiku-bilv">{{ parseInt(item.scale).toFixed(0) }}
								<view class="kaoshi-remind-title">%</view>
							</view>
						</view>
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-bottom">
								<view class="iconfont icon-dui2"></view>
								<view class="pub-gray">已答题{{ item.test_num }}/{{ item.total_num }}</view>
							</view>
							<view class="pub-gray">正确率</view>
						</view>
					</view>
					<view class="iconfont icon-arrow"></view>
				</view>
			</block>

		</view>
		<view class="kaoshi-tiku-title" v-if="zhenti_list.length > 0">
			<view class="kaoshi-tiku-title-l">真题练习</view>
			<view @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=2')" class="kaoshi-tiku-title-r">
				全部真题
			</view>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in zhenti_list" :key="index">
				<view class="kaoshi-tiku-content" @tap="goto_detail(item, '2')">
					<view style="flex: 1;">
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-top">
								<view>{{ item.name }}
									<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
										<image src="../../static/img/vip.png" mode=""></image>
										<view>VIP</view>
									</view>
								</view>
							</view>
							<view class="kaoshi-tiku-bilv">{{ item.scale }}
								<view class="kaoshi-remind-title">%</view>
							</view>
						</view>
						<view class="kaoshi-tiku-content-flex">
							<view class="kaoshi-tiku-content-bottom">
								<view class="iconfont icon-dui2"></view>
								<view class="pub-gray">已答题{{ item.test_num }}/{{ item.total_num }}</view>
							</view>
							<view class="pub-gray">正确率</view>
						</view>
					</view>
					<view class="iconfont icon-arrow"></view>
				</view>
			</block>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
import {
	mapState
} from 'vuex';
import Error from '@/core/untils/error/index';
import authVip from '@/components/authVip.vue'
export default {
	data() {
		return {

			unit_list: [],
			zhenti_list: [],
			showAuthVip: false,
		};
	},
	onShow() {
		this.get_tiku_list();
		console.log('%c [ this.$store.state ]-147', 'font-size:13px; background:pink; color:#bf2c9f;', this.$store.state)
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		// #endif
	},
	computed: {
		...mapState(['subject2', 'subjectVip', 'userinfo']),
		static_media() {
			return {
				img01: this.$myConfig.localMedia + '/static/img/tiku-icon1.png',
				img02: this.$myConfig.localMedia + '/static/img/tiku-icon2.png',
				img03: this.$myConfig.localMedia + '/static/img/tiku-icon3.png',
				img04: this.$myConfig.localMedia + '/static/img/tiku-icon4.png',
			};
		},
	},
	components: {
		authVip
	},

	methods: {

		//章节列表
		async get_tiku_list() {
			let needLogin = false
			if (this.userinfo.token) {
				needLogin = true
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.unitList,
				data: {
					subject_id: this.subject2.id,
					unit_id: 0,
					page: 1,
					limit: 4
				},
				needLogin: needLogin
			});
			if (res.code === 1) {
				this.unit_list = res.data.data;
				console.log('%c [ this.unit_list ]-189', 'font-size:13px; background:pink; color:#bf2c9f;', this.unit_list)
			}
		},
		//历年真题列表
		async get_zhenti_list() {
			let needLogin = false
			if (this.userinfo.token) {
				needLogin = true
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.zhentiList,
				data: {
					subject_id: this.subject2.id,
					page: 1,
					limit: 4
				},
				needLogin: needLogin
			})
			if (res.code === 1) {
				this.zhenti_list = res.data.data;
			}
		},
		goto_detail(item, type) {
			// if (item.is_unlock == 0) {
			// 	return
			// }
			if (this.$myUserLogin.getToken()) {
				if (item.total_num == 0) { //如果目录下没有题目，提示用户
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '当前目录下没有题目，请联系老师'
					});
					return
				}
				if (!this.subjectVip && item.is_vip) {
					this.showAuthVip = true
					return
				}
				if (type == '1') {
					if (item.is_last == 0) {
						//非终极栏目，点击进入下级栏目
						this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=1' + '&name=' +
							item.name)
					} else if (item.is_last == 1) {
						//终极栏目，点击进入答题页
						this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=1' +
							'&name=' + item.name)
					}
				} else if (type == '2') {
					//历年真题都是终极栏目，点击进入答题页
					this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=2' +
						'&name=' + item.name)
				}
			} else {
				Error.errorNotLoggedIn();
			}
		},
		//跳转前需要登录
		navTo(url) {
			if (this.$myUserLogin.getToken()) {
				this.$openrul(url)
			} else {
				Error.errorNotLoggedIn();
			}
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}

/* 首页头部 */
.kaoshi-head {
	background: #3a79f7;
	position: relative;
	top: 0;
	border-bottom: none;
}

.kaoshi-head-top {
	color: #fff;
	line-height: 58px;
}

.kaoshi-head-top .kaoshi-head-left {
	flex: 1;
	display: flex;
	align-items: center;
}

.kaoshi-head-top .kaoshi-head-left .icon-weibiaoti {
	padding-left: 4px;
	font-size: 18px;
}

.kaoshi-head-top .kaoshi-head-kemu {
	font-size: 16px;
	text-align: center;
}

.kaoshi-head-top .kaoshi-head-right {
	width: 18%;
	text-align: right;
}

.kaoshi-head-top .kaoshi-head-right .icon-datiqia {
	font-size: 22px;
}


.kaoshi-head-nav {
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	color: #605d70;
	padding: 16px 0;
	z-index: 10000;
	background: #fff;
	width: 93%;
	margin: 11px auto;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.kaoshi-head-nav .kaoshi-head-nav-flex {
	flex: 1;
}

.kaoshi-head-nav-img {
	width: 38px;
	height: 38px;
}

.kaoshi-tiku-title {
	width: 92%;
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.kaoshi-tiku-title-l {
	display: flex;
	font-weight: bold;
	font-size: 17px;
}

.kaoshi-tiku-title-r {
	color: #000;
	border: solid 1px #d8d8d8;
	padding: 5px 13px;
	border-radius: 35px;
	font-size: 12px;
}

.kaoshi-tiku {
	background: #fff;
	width: 93%;
	margin: 0 auto 8px;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.kaoshi-tiku-content {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	font-size: 14px;
	padding: 10px 10px;
	border-bottom: solid 1px #f5f5f5;
}

.kaoshi-tiku-content .icon-arrow {
	padding-left: 13px;
	color: #b3b3b3;
	font-size: 14px;
}

.kaoshi-tiku-content-flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: inherit;
}

.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
	padding-bottom: 6px;
}

.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
	font-size: 14px;
}

.kaoshi-tiku-content-top {
	display: flex;
	align-items: center;
	flex: 1;
	font-size: 16px;
}

.kaoshi-tiku-content-top img {
	width: 20px;
	height: 22px;
	margin-right: 10px;
}

.kaoshi-tiku-content-bottom {
	font-size: 13px;
	display: flex;
	align-items: center;
}

.kaoshi-tiku-content-flex .icon-dui2 {
	margin: 2px 2px 0 0;
	color: #3c7bfc;
}

.kaoshi-tiku-bilv {
	font-size: 22px;
	color: #000;
	display: flex;
	align-items: baseline;
}

.kaoshi-remind-title {
	font-size: 13px;
	color: #000;
}

/* .lock {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 50px;

}

.lock image {
	width: 30px;
	height: 30px;
} */

.lockbg {
	background: #717171;
	position: relative;
}

.lockbg::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	background-image: url('/static/img/vip.png');
	background-size: cover;
}
</style>
